<template>
    <view class="withdraw-wrapper">
        <view class="withdraw common-interval">
            <view class="common-title">
                <text class="common-title-line"/>
                <text>申请提现</text>
            </view>
            <view class="input-wrapper" :class="[showModal ? 'border' : '']">
                <text v-show="showModal" class="input-placeholder">请输入提现金额</text>
                <input
                        v-show="!showModal"
                        v-model="money"
                        placeholder-style="color: #999;"
                        class="common-uni-input"
                        placeholder="请输入提现金额"/>
                <view class="withdraw-btn" @tap="allWithdraw">全部提现</view>
            </view>
            <text class="common-squar-btn" @tap="withdrawHandle">确认提现</text>
            <view class="tips common-little-font">
                说明：<br/>
                受微信规则影响，每天最多可提现三次，每天最多提现5000元
            </view>
        </view>
        <gw-show-modal v-model="showModal" type="custom" width="630rpx" height="453rpx">
            <view class="modal">
                <view class="modal-content">
                    <view class="title">请填写手机短信验证码</view>
                    <view class="phone">已发送至手机号：{{phoneNum}}</view>
                    <view class="input-wrapper">
                        <input :value="verificationCode" placeholder-style="color: #999;" class="uni-input" placeholder="请输入验证码"/>
                        <view class="withdraw-btn" v-if="!isShowTime" @tap="getVerificationCode">重新获取</view>
                        <view v-else class="withdraw-btn time-btn">{{time}}</view>
                    </view>
                    <view class="btn-wrap" @tap="withdrawMoney">
                        确认提现
                    </view>
                </view>
                <view class="modal-close">
                    <text class="one one-close icon-btn" @tap.stop="closeModal"/>
                </view>
            </view>
        </gw-show-modal>
    </view>
</template>

<script>
    import gwShowModal from '../../pages/components/gw-show-modal';
    import {mapGetters} from 'vuex';
    import service from "@/service";
    export default {
        name: "withdraw",
        components: {
            gwShowModal
        },
        computed: {
            ...mapGetters(['phoneNum'])
        },
        data(){
            return{
                money: '',
                verificationCode: '',
                showModal: false,
                isShowTime: true,
                time: 60,
                timer: null,
                depMoney: {}
            }
        },
        onLoad(res){
            this.getMoney()
        },
        methods: {
            getMoney(){
                uni.showLoading({
                    title: '加载中',
                });
                service.mineService.getMoney({
                    data: {},
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.depMoney = res.result || {}
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            });
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    }
                });
            },
            withdrawHandle(){
                // this.showModal = true;
                service.mineService.balance({
                    data: {
                        money: this.money
                    },
                    success: res => {
                        uni.hideLoading();
                        uni.navigateBack({
                            delta: 1
                        })
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    }
                });
                this.isShowTime = true;
                this.time = 60;
                clearInterval(this.timer)
                this.countDown()
            },
            allWithdraw(){
                this.money = this.depMoney.balance || 0;
            },
            closeModal(){
                clearInterval(this.timer)
                this.showModal = false;
            },
            getVerificationCode(){
                this.time = 60;
                this.isShowTime = true;
                this.countDown();
            },
            withdrawMoney(){
                this.showModal = false;
                clearInterval(this.timer)
            },
            countDown(){
                this.timer = setInterval(()=>{
                    this.time--;
                    if(this.time === 0){
                        clearInterval(this.timer)
                        this.isShowTime = false
                    }
                }, 1000)
            }
        }
    }
</script>

<style scoped lang="scss">
    .withdraw-wrapper{
        min-height: 100%;
        background: #F9F9F9;
        .withdraw{
            margin-top: 50rpx;
            padding-bottom: 60rpx;
        }
        .input-wrapper{
            width: 690rpx;
            height: 88rpx;
            position: relative;
            margin-bottom: 34rpx;
            &.border{
                border:1px solid #E5E5E5;
            }
            .input-placeholder{
                padding-left: 30rpx;
                color: #999;
                line-height: 88rpx;
            }
            .withdraw-btn{
                position: absolute;
                right: 30rpx;
                top: 0;
                height: 88rpx;
                color:#2BA8FC;
                line-height: 88rpx;
                z-index: 2;
            }
        }
        .tips{
            margin-top: 60rpx;
        }
    }
    .modal{
        width: 630rpx;
        height: 640rpx;
        background: transparent;
        position: relative;
        .modal-content{
            width: 100%;
            height: 453rpx;
            background: #ffffff;
            border-radius: 20rpx;
            text-align: center;
            padding-top: 50rpx;
            box-sizing: border-box;
            .title{
                font-size: 32rpx;
            }
            .phone{
                color: #999999;
                margin-top: 15rpx;
            }
            .input-wrapper{
                width:554rpx;
                height:95rpx;
                position: relative;
                margin-left: 38rpx;
                margin-top: 38rpx;
                .uni-input{
                    width: 100%;
                    height: 100%;
                    border:1px solid #E5E5E5;
                    text-align: left;
                    padding-left: 30rpx;
                    box-sizing: border-box;
                }
                .time-btn{
                    color: #999999;
                }
            }
            .btn-wrap{
                width:554rpx;
                height:88rpx;
                line-height: 88rpx;
                text-align: center;
                color: #ffffff;
                background:rgba(43,168,252,1);
                border-radius:4rpx;
                margin-left: 38rpx;
                /*margin-top: 30rpx;*/
            }
        }
        .modal-close{
            font-size: 50rpx;
            position: absolute;
            bottom: 10rpx;
            text-align: center;
            width: 100%;
            color: #fff;
            .icon-btn{
                border: 1rpx solid #fff;
                border-radius: 50%;
                padding: 14rpx;
            }
        }
    }
</style>